<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言墙</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container{
            width:100%;
        }
        h1{
            text-align: center;
            margin: 20px 0;
            color: rgb(119, 142, 124);
        }
        p{
            text-align: center;
            padding: 10px 0;
            font-size: 12px;
            color: rgb(107, 107, 107);
        }
        .row{
            width: 270px;
            height: 30px;
            margin: 3px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
            width: 70px;
        }
        .row input{
            width: 200px;
            height: 25px;
            color: rgb(232, 131, 87);
            line-height: 20px;
            text-indent: 0.5em;
            /* 去掉轮廓线 */
            outline: none;
        }
        .row #submit{
            width: 200px;
            margin-left: 70px;
            height: 25px;
            font-size: 16px;
            line-height: 20px;
            background-color: rgb(193, 226, 203);
            border: none;
            outline: none;
            border-radius: 5px;
        }
        .row #submit:active{
            background-color: rgb(119, 142, 124);
        }


    </style>

    <div class="container">
        <h1>留言墙</h1>
        <p>输入后点击提交,会将信息显示在表格中</p>
        <div class="row">
            <span>发送方: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>接收方: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>内容: </span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
    </div>


    <script src="jquery.js"></script>
    <script>
        // 点击按钮提交，Ajax构造数据发送给服务器
        function getMessage(){
            $.ajax({
                type: 'get',
                url: 'message',
                success: function (body){
                    // 拿到的形式就是一个JSON字符串的数组
                    // [{"from":"黑猫","to":"白猫","message":"喵~"}]
                    for(let message of body){
                        // 依次取数组中的每个元素
                        let newDiv = document.createElement('div');
                        newDiv.innerHTML = message.from + '对' + message.to + '说: ' + message.content;
                        newDiv.className = 'row';
                        let container = document.querySelector('.container');
                        container.appendChild(newDiv);
                    }
                }
            })
        }
        // 调用函数
        getMessage();

        // 用户点击 submit ,就会获取到内容,构造成一个div插入到文章末尾
        let submit = document.querySelector('#submit');
        submit.onclick = function(){
            // 获取内容
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let content = inputs[2].value;
            if(from == '' || to == '' || content == ''){
                // 用户还没写完
                return;
            }
            // 生成新的div
            let newDiv = document.createElement('div');
            newDiv.innerHTML = from + '对' + to + '说: ' + content;
            newDiv.className = 'row';

            let container = document.querySelector('.container');
            container.appendChild(newDiv);

            // 清空之前输入框的内容
            inputs[0].value = '';
            inputs[1].value = '';
            inputs[2].value = '';


            // 发送请求，提交给服务器
            // 页面加载，从服务器获取消息列表，并显示
            let body = {
                from: from,
                to: to,
                content: content
            }
            // 把当前输入框的内容构造成一个 http请求，通过Ajax发给服务器
            $.ajax({
                type: 'post',
                url: "message",
                contentType: "application/json; charset=utf8",
                data: JSON.stringify(body),// 将 js对象转为 Json字符串
                success: function () {
                    console.log("消息提交成功!");
                },
                error: function () {
                    alert("消息提交失败!");
                },
            })
        }
    </script>
</body>
</html>